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Agenda 


• What makes JavaScript unique and challenging 

• What makes V8 unique and challenging? 

• What the heck is WebAssembly and why? 
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We all love JavaScript 
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What makes JavaScript unique and interesting? 


• JavaScript is the language of the Web 

• Scripting language: programs presented in source form 

• "Classically slow" language 

• Prototype-based object model 

• Functional features with closures 

• Untyped: variables and properties do not have types, values do 

• A smattering of oddball features 


o Weird scoping rules 
o eval 
o with scopes 
o Proxies 
o Rest parameters 


o Default parameters 
o Generators 
o Undetectables 
o Holey arrays 
o Arguments object 


o 
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Challenge: programs presented in source form 


• Parsing has to be fast 

• Source code is slower for machines to parse 

o Source code parser: 1 -1 OMB/s 
o Binary format like bytecode: 1 0OMB/s 

• New language features all the time 

o All features supported by all virtual machines 
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Challenge: prototype- based object model 


var x = new SubClass("mine”, 


100 ); 


function BaseClass(name) { 
this. name = name; 

} 

function SubClass(namej data) { 

BaseClass . call(this, name); 
this. data = data; 

} 

BaseClass . prototype. print = function() { 
print (this . name) ; 

} 



Subclass . prototype. proto = BaseClass . prototype; 
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Challenge: prototype- based object model 



function BaseClass(name) { 
this. name = name; 

} 

BaseClass . call(thiSj name); 
this. data = data; 

} 

BaseClass . prototype. print = function() { 
print (this . name) ; 

} 




on the “prototype" 
of an object 
• Prototypes chain 
together to emulate 
inheritance 


Subclass . prototype. proto = BaseClass . prototype; 
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Challenge: prototype- based object model 


var x = new SubClass("mine”, 


100 ); 


function BaseClass(name) { 
this. name = name; 

} 

function SubClass(namej data) { 
BaseClass . call(this, name); 
this. data = data; 


} 






• Objects instantiated 
by "new Function()" 
syntax 



• Prototypes chain 
together to emulate 
inheritance 


Subclass . prototype. proto = BaseClass . prototype; 
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Challenge: prototype- based object model 


var x = new SubClass("mine” : 


100 ); 


function BaseClass(name) { 
this. name = name; 

} 

function SubClass(name, data) { 

BaseClass . call(this , name); 
this. data = data; 

} 

BaseClass . prototype. print = function() { 
print (this . name) ; 

} 




• Objects instantiated 
by "new Function()" 
syntax 

• Methods installed 
on the "prototype" 
of an object 
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Challenge: functional programming with closures 


function Counter(name) { 
var count = 0; 
return { 
inc : 







var x = new Counter(); 



I 


• Object literals allow 
grouping multiple 
closures into a 
"mini-object" 


var before = x.get(); 
x. inc( ) ; 
x. print( ) ; 
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Challenge: functional programming with closures 


function Counter(name) { 
var count = 0; 
return 





} 


var x = new Counter(); 


• Closures over 
locals, even 
mutable locals 



var before = x.get(); 
x. inc( ) ; 
x. print( ) ; 
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Challenge: untyped variables and operations 



Variables, 
parameters, 
properties, and 
expressions do not 
have types 
Operators are 
overloaded for 
different types of 
values 
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Challenge: untyped variables and operations 




properties, and 
expressions do not 
have types 
Operators are 
overloaded for 
different types of 
values 
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Challenge: untyped variables and operations 
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• Variables, 
parameters, 
properties, and 
expressions do not 
have types 




Glance at Semantics: + 


12.7.3.1 


Runtime Semantics: Evaluation 


A ddili veExpression 


operator + 

AdditiveExpression 4 MultiplicativeExpression 


1. Let Ire f be the result of evaluating AdditiveExpression. 

2. Let Ival be GetValue(/ref). 

3. ReturnIfAbrupt(/va/). 

4. Let rref be the result of evaluating MultiplicativeExpression. 

5. Let rval be GetValuefrre/). 

6. ReturnlfAbruptfrva/). 

7. Let Iprim be ToPrimitive(/va/). 

8. ReturnlfAbruptf Iprim). 

9. Let rprim be ToPrimiti ve(rva/). 

10. ReturnlfAbrupt(rprim). 

11. If Type(/pr/m) is String or Type( rprim) is String, then 

a. Let Istr be ToString (Iprim). 

b. ReturnIfAbrupt(/str). 

c. Let rstr be ToString(rprim). 

d. ReturnlfAbrupt(rstr). 

e. Return the String that is the result of concatenating Istr and rstr. 

12. Let Inum be ToNumber(/pr/m). 

13. ReturnIfAbrupt(/num). 

14. Let rnum be ToNumber(rpn'm). 

15. ReturnlfAbrupt(mum). 

16. Return the result of applying the addition operation to Inum and rnum. See the Note below 12.7.5. 


NOTE 1 No hint is provided in the calls to ToPrimitive in steps 7 and 9. All standard objects except Date 
objects handle the absence of a hint as if the hint Number were given; Date objects handle the absence 
of a hint as if the hint String were given. Exotic objects may handle the absence of a hint in some 
other manner. 

NOTE 2 Step 11 differs from step 5 of the Abstract Relational Comparison algorithm (7.2.11), by using the 
logical-or operation instead of the logical-and operation. 


Google 


Glance at Semantics: + 



11. If Type(/pn'm) is String or Type( rprim) is String, then 

a. Let Istr be ToString(/pr/m). 

b. RetumIfAbrupt(/str). 

c Let rstr be ToString(rprim). 

d. RetumlfAbrupt(rstr). 

e. Return the String that is the result of concatenating Istr and rstr. 

12. Let Inum be ToNumber(/prim). 

13. RetumIfAbrupt(/mim). 

14. Let mum be ToNumber(rprim). 

15. RetumIfAbrupt(mu/n). 

16. Return the result of applying the addition operation to Inum and mum. See the Note below 12.7.5. 


NOTE 1 No hint is provided in the calls to ToPrimitive in steps 7 and 9. All standard objects except Date 
objects handle the absence of a hint as if the hint Number were given; Date objects handle the absence 
of a hint as if the hint String were given. Exotic objects may handle the absence of a hint in some 
other manner. 

NOTE 2 Step 11 differs from step 5 of the Abstract Relational Comparison algorithm (7.2.11), by using the 
logical-or operation instead of the logical-and operation. 
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7.1.1 ToPrimitive ( input [, Preferrediype] ) 


The abstract operation ToPrimur. P ”i m '■* 4" “| % / gP referredType. The abstract 

opeiaiioiiToPilmlUve cunveib its i/liuivy I I _L II I _1_ V CJaLile ul convening to more 

than one primitive type, it may use the optional hint Pryfcm , clT\ / pe to favour tbal type. Conversion occurs according 
to Table 9: ' 


Table 9 — ToPrimitive Conversions 


Input Type 

Result 

Completion 

Record 

If input is an abrupt completion, return input. Otherwise return ToPriinitive(input.[[value]]) also 
passing the optional hint PreferredTvpe. 

Undefined 


Null 

Return input. 

Boolean 

Return input. 

Numjwr 

Renan input. 


Return input. 

Symbol 

Return input. 

Object 

Perform the steps following this table. 


When Type( Input) is Object, the following steps ate taken: 

1. If Preferredtype was not passed, let hint be "default". 

2. Else if Preferrediype is hint String, let him be "string". 

3. Else PieferretlType is hint Number, let (tint be "number". 

4. Let emliclbPrim be GetMethod( input, @(©toPrimitive). 

5. RetumlfAbnipt(exoticJbPnni). 

6. if exoticToPrim is not undefined, then 

a. Let result be CallfexoticToPrim, input, «him»). 

b. ReturnIfAbrupt(resu/i). 

c. If Type(result) is not Object, return result. 

d. Throw a TypeError exception. 

7. If hint is "default", let hint be "number". 

8. Return OrdlnaryToPrlmltlve( Input, hint). 

When the abstract operation OrdinaryToPrimitive is called with aiguments O and hint, the following steps are taken: 

1. Assert: Type(O) is Object 

2. Assert: Type(hint) is String and its value is either "string" or "number". 

3. If (lint is "string", then 

a. Let methodNames be «"toString", "valueOf "». 

4. Else, 

a. Let methodNames be •< "valueOf", "toString"». 

5. For each name in methodNames in List order, do 

a. Let method be Get(0, name). 

b. RetumI fAbrupt(method). 

c. If lsCallable(met!iod)is true, then 

1. Let result be Callfmerhod, O). 

1L Returnlf Abrupt) result). 

iii. If Typefresult) is not Object, return result. 

6. Throw a TypeError exception. 

When ToPrimitive is called with no hint, then it generally behaves as if the hint were Number. 
However, objects may over-ride this behavioar by defining a @@toPrimilive method. Of the objects 
defined in this specification only Date objects (see 20.3.4.45) and Symbol objects (see 19.4.3.4) over- 
ride (he default ToPrimitive behaviour. Date objects treat no hint as if the hint were Suing. 


NOTE 



Glance at Semantics: + 



Glance at Semantics: + 


12.7.3.1 Runtime Semantics: Evaluation 


ditiwLxpression : AJJ: m,-, a 

operator + 

2. Let Ival be GetValue(lref). • 


2. Let Ival be GetValueflrefl. • 

3, RcturnlfAbruptf Ival). 


5 Let ival be GetValue(rre/). 


a Return! fAbrupt(lprim). 

9. Let rprtm be ToPrimiiive(rvof)- 
10. ReturnlfAbruptf rprim). 

1L If Typef/prim) is String or Type(rprim) is String, then 



d. RetumlfAbrupt(rstr). 

e. Return the Strlna that is the result of concatenation istr and rstr. 



13. ReturnlfAP ltiptl lliutl l ). ' 

14. Let mum be TbNumber(rprim). 

15. Return! fAbrupt(rnu;n). 

NOTE 1 No hint is provided in the calls to ToPrimitive in steps 7 and 9. All standard objects except Date 
objects handle the absence of a hint as if the hint Number were given; Date objects handle the absence 
of a hint as if the hint String were given. Exotic objects may handle the absence of a hint In some 
other manner. 

NOTE 2 Step 11 differs from step 5 of the Abstract Relational Comparison algorithm (7.2.11). by using the 
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Glance at Semantics: + 


12.7,3.1 Runtime Semantic 



BperiFEon + 
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GetMethod 
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Glance at Semantics: + 
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Glance at Semantics: + 


12.7.3.1 


Runtime Semantics: Evaluation 


A ddili veExpression 


operator + 

AdditiveExpression 4 MiiltiphcativeExpression 


1. Let Ire f be the result of evaluating AdditiveExpression. 

2. Let Ival be GetValue(/ref). 

3. ReturnIfAbrupt(/va/). 

4. Let rref be the result of evaluating MultiplicativeExpression. 

5. Let rval be GetValuefrre/). 

6. ReturnlfAbruptfrva/). 

7. Let Iprim be ToPrimitive(/va/). 

8. ReturnlfAbruptf Iprim). 

9. Let rprim be ToPrimiti ve(rva/). 

10. ReturnlfAbrupt(rprim). 

11. If Type(/pr/m) is String or Type( rprim) is String, then 

a. Let Istr be ToString (Iprim). 

b. ReturnIfAbrupt(/str). 

c. Let rstr be ToString(rprim). 

d. ReturnlfAbrupt(rstr). 

e. Return the String that is the result of concatenating Istr and rstr. 

12. Let Inum be ToNumber(/pr/m). 

13. ReturnIfAbrupt(/num). 

14. Let rnum be ToNumber(rpn'm). 

15. ReturnlfAbrupt(mum). 

16. Return the result of applying the addition operation to Inum and rnum. See the Note below 12.7.5. 


NOTE 1 No hint is provided in the calls to ToPrimitive in steps 7 and 9. All standard objects except Date 
objects handle the absence of a hint as if the hint Number were given; Date objects handle the absence 
of a hint as if the hint String were given. Exotic objects may handle the absence of a hint in some 
other manner. 

NOTE 2 Step 11 differs from step 5 of the Abstract Relational Comparison algorithm (7.2.11), by using the 
logical-or operation instead of the logical-and operation. 


Local outcome 

Number Conversion, Number Add 


String Conversion, String Add 


Side effects 


DS property access 
User method invocations 
Proxy method invocations 
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Challenge: untyped variables and operations 


function add(a, b) { 
return a + b; 


} 

add (1^ 2); 
add("foo”, 1); 
add(l, "foo JJ ) ; 
add ({foo : 1); 

add ("hello”, ); 

add(1.01, 3.03); 




Variables, 
parameters, 
properties, and 
expressions do not 
have types 
Operators are 
overloaded for 
different types of 
values 
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Challenge: eval 


function add(a, b) { 
return eval(a) + 


} 

add (1, 2); 
add("b = 30 ”, 1 ) ; 
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The eval operator 
evaluates a string 
as if the code was 
injected directly into 
the scope 
Can modify locals, 
introduce new 
locals, and other 
horrible things 


Challenge: eval 


function add(a, b) { 
return eval(a) + 

} 

add (1, 2); 


add( 


); 
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The eval operator 
evaluates a string 
as if the code was 
injected directly into 
the scope 

introduce new 
locals, and other 
horrible things 




Other challenges 
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Lots of neat and 
surprisingly tricky 
features 

Most interact poorly 
Conversion 
gotchas, like the 
odd falsy object 
Proxies 

Web compatibility 
issues 


The V8 Approach 
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What makes V8 unique and interesting? 

• V8 was the first really fast JavaScript Virtual Machine 

o Launched with Chrome in 2008 
o 1 0x faster than competition at release 
o 1 0x faster today than 2008 

• Efficient object model using "hidden classes," a technique from Self VM 

• JITs galore 

o Fast AST-walking JIT compiler: fullcodegen (2008) with inline caching 
o Optimizing JIT compiler: Crankshaft (201 0) with type feedback and deoptimization 
o Optimizing JIT compiler: TurboFan (201 5) with type and range analysis, sea of nodes 

• GCs galore 

o Evolution from simple generational collector to incremental and concurrent collector 
o Scheduling GC to reduce jank and save memory 
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JavaScript Program Lifetime 



Google 
















V8 Approach: parsing 


• Parsing has to be fast 

o Parsing JS is hard: hand-written, recursive descent parser 

• Two modes: 

o preparse (detect structure only) 
o full (build AST) ~3x slower 

• Lazy parsing: 

o A full parse of a function isn't done until needed to execute it 
o Preparser finds boundaries of functions to quickly parse them later 

• Streaming parsing: 

o Parse while script is downloading over the wire 
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V8 Approach: lazy compilation 


JSFunction 



JavaScript 

source 


Abstract 
Syntax T ree 


parse 



>=> 

unoptimized 

“fullcode” 

compiler 



machine code 
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V8 Approach: object model 


function MyObject (name, data) { 
this. name = name; 
this. data = data; 
return this; 


} 

var x = new MyObject ("string”, 0); 
x. extra = 44; 
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V8 Approach: object model 


function MyObject (name, data) { 
this. name = name; 
this. data = data; 
return this; 



Google 


map[MyObject] 



size 

properties 




V8 Approach: object model 


function MyObject (name. 



this. data = data; 
return this; 


data) { 


} 

var x = new MyObject ("string”, 0); 
x. extra = 44; 
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map 


"string” 


map[MyObject2] 

8 

1 


name 

4 


size 

properties 



V8 Approach: object model 


function MyObject (name, 
this. name = name; 


return this; 


data) { 


} 

var x = new MyObject ("string”, 0); 
x. extra = 44; 
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map[MyObject3] 



size 

propertie; 




V8 Approach: object model 


function MyObject (name, data) { 
this. name = name; 
this. data = data; 


} 

var x = new MyObject ("string”, 0); 
x. extra = 44; 


Google 


map[MyObject3] 



size 

propertie; 




V8 Approach: object model 


function MyObject (name, data) { 
this. name = name; 
this. data = data; 
return this; 


} 

var x = new MyObject ("string”, 0); 



Google 


map[MyObject4] 





V8 Approach: object model 

map[MyObject4] 


Dynamically 
estimated “slack 
tracking” 




Statically estimated 
“expected number of 
properties” 
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V8 Approach: map forest 
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blam 


map 


map 


map 


map 


map 


map 













V8 Approach: map forest 
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potentially 
stable map 


map 


map 


map 


map 


map 


map 













V8 Approach: object model 


function MyObject (name, data) { 
this. name = name; 
this. data = data; 
return this; 


} 

MyObject . prototype. print = 
function() { 

print("name: " + this. name); 
print("data: " + this. data); 



var bar = new MyObject ("foo”, 9); 


Google 


map 


map 


"foo" 


9 


bar 


proto 

8 

2 

name 

0 

data 

4 


► mao 


f unc 


f unc 


f unc 


MyObject. prototype 





V8 Approach: object model 
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V8 Approach: object model 
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V8 Approach: untyped variables and operations 



Dynamically record 
types of inputs to 
overloaded 
operations 
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V8 Approach: untyped variables and operations 



Dynamically record 
types of inputs to 
overloaded 
operations 


Most dynamism is site-specific 
and stable. Normally safe to 
assume that what happened last 
time will happen the next time. 
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V8 Approach: untyped variables and operations 



“Usually numbers” they said! 


Except they lied! 

Always have a backup plan. 
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V8 Approach: adaptive optimization 


function run(a, b) { 

for (var i = 0; i < 100; i++) { 
var x = new Adder(a, b); 
x. add(i) ; 


} 

return x.result(); 


} 
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V8 Approach: adaptive optimization 



function run(a, b) { 
for (var i = 0; 
var x = 

(i); 

} 

return 


Record type for i 
Record type for i 


Record target for new Adder 


Record maps for x 
Record targets for x. add 


Record maps for x 
Record targets for x. result 
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V8 Approach: adaptive optimization 


function run(a, b) { 
for (var i = 0; 
var x = 

(i); 

} 

return 


Record maps for x 
Record targets for x. result 



Record type for i 


a | 

Int arithmetic 


Record type for i | n t arithmetic 


Record target for new Adder 


Inline 


Record maps for x 
Record targets for x. add 


Remove map 
checks 


Remove map 
checks 


Inline 


Inline 
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V8 Approach: adaptive optimization 



Type analysis 



hotness 

criteria 


Remove map 
checks 


Inline 


GVN 
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V8 Approach: adaptive optimization 




optimized 

compile 



optimized 

code 
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V8 Approach: adaptive optimization 




deoptimize 
upon failed 
speculation 



optimized 

code 
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V8 Approach: adaptive optimization 




deoptimize 



optimized 

code 
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A Zoo of Tiers 

FullCodeGen 
Unoptimized compiler 



Crankshaft TurboFan 

optimizing compiler optimizing compiler 
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A Zoo of Tiers (4) 

TurboFan 

optimizing compiler 



generates 


Google 


Ignition 

interpreter 



Faster 

startup! 

Saves 

memory! 

Still 

portable! 

(11 supported 
TurboFan archs) 



The Impossible Garbage Collection Triad 

High 



Latency Memory Overhead 
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V8 Garbage Collection 


S Scavenger (~0-1 0 ms) 

I Incremental Marking (~0. 01 -CONFIGURABLE ms) 
M Final Mark-Compact Collection (~4-40 ms) 

F Full Mark-Compact Collection (>40ms) 

JavaScript Execution Time 


Start Mark-Compact 


M 


Finish Mark-Compact 
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Confidential & Proprietary 



















Estimating GC pauses 


S Scavenger (~0-1 0 ms) 

I Incremental Marking (~0.01-CONFIGURABLE ms) 

M Final Mark-Compact Collection (~4-40 ms) 

F Full Mark-Compact Collection (>40ms) 

JavaScript Execution Time 


Start Mark-Compact 


M 


Finish Mark-Compact 
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Confidential & Proprietary 



















Estimating GC pauses 


S Scavenger (~0-1 0 ms) 

I Incremental Marking (~0.01-CONFIGURABLE ms) 

M Final Mark-Compact Collection (~4-40 ms) 

F Full Mark-Compact Collection (>40ms) 

JavaScript Execution Time 
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Confidential & Proprietary 













Latency versus Memory Overhead 


• Foreground tab 

o Latency is critical 

o New frames are drawn every 1 6.66 ms when 
animation or scrolling happens 
o Reducing memory becomes important as soon 

as the tab becomes 
inactive 

• Background tabs 

o Memory consumption more important than 
latency 

o Idle tabs can be aggressively garbage collected 
to save memory 
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Idea: Make garbage collection invisible 


Google 

When is the best time to do a GC? 

When nobody is looking. 

Using camera to track eye movement 
When subject looks away do a GC. 



I. Wrists Straight 


Lumbar 

Support 




Adjustable 

Scat 

Height 


| feet on floor; 
footrest for 
shorter people 
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Rick Hudson, GopherCon 2015 


Life of an animation Frame 


Main Thread 

JavaScript 

Commit 

IDLE TIME 

Compositor 

Begin Frame 

Commit 

Manage Tiles 


Draw 



Start Frame 


16.6 ms 


End Frame 
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Life of an animation Frame 


Main Thread 

JavaScript Garbage Collection JavaScript 

Commit 

IDLE TIME 


Compositor 

Begin Frame 

Commit 

Manage Tiles 


Draw 


Start Frame 


16.6 ms 


EndTrame 

MISSED 

FRAME 
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Life of a frame 


JS 


IDLE 


J 

S 


IDLE 


JS 


IDLE 


JS 


GC 
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IDLE 












MIS 

5SED 


1“ 

16ms 

1 

16ms 



16ms 

1 

16ms FR 

AME 16ms 

1 


JS 

IDLE 

J 

s 

GC 

1 

D 

L 

JS 

IDLE 

JS 

IDLE 

JS 

IDLE 





E 








Google 


16ms 


16ms 


16ms 


16ms 


16ms 




Latency-driven Idle Time GC Scheduling (PLDI16) 

• V8 heuristics tries to estimate: 

o average young generation collection speed/MB 
o average incremental marking speed/MB 
o average finalization of mark-compact speed/MB 

• V8 registers an idle garbage collection task in the Chrome scheduler when 
given garbage collection operation should happen soon 

• The task scheduler will execute it when there is idle time 

o apportioning up to 50ms to perform garbage collection 


vsync 


vsync 


vsync 




idle period . 



idle period , 
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Telemetry Infinite Scrolling Benchmarks 
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Confidential & Proprietary 


WebAssembly 

(demo) 
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Motivation for WebAssembly 

• Big pressure to bring native code to the web 

o Competition with installed mobile apps (Android, iOS) 
o Big-time OpenGL apps: games, CAD programs, maps 
o Extensibility: audio/video codecs 

• Existing solutions fall short 

o JavaScript increasing contortions to serve as a compilation target 
o PNaCI encountered heavy industry resistance 

• Demand for new language capabilities limited by JS bottleneck 

o SIMD 

o SharedArrayBuffer 
o Threads 
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asm.js? what's that? 


a = x + y 


Normal 

JavaScript 

ToNumber? 

ToString? 

StringAdd? 

IntegerAdd? 

DoubleAdd? 


x: int32 
y: int32 

a = x + y | 0 


asm.js 


lnt32Add 
a: int32 


x: float64 
y: float64 

a = + ( x + y) 

asm.js 

Float64Add 
a: float64 
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asm.js? what's that? (2) 


var buffer = new ArrayBuffer(16 * 1024 * 1024); 
function module(buffer , stdlib) { 

"use asm”; 

var heap8 = new Int8Array (buffer) ; 
function foo(a) { 
a = a | 0; 

return heap8[a] + 1 | 0; 

} 

return {foo: foo} 

} 

var mod = module(buffer , {print: print}); 
mod .foo (100) ; 
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asm.js? what's that? (3) 

• Emscripten: A POSIX-like platform with 

o Toolchain based on forked LLVM 
o libc 

o OpenGL (on top of WebGL) 
o a community 
o Game engines 
o Applications 
o Benchmarks 
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asm.js? what's that? (4) 

• 2 engines specially recognize asm.js subset and validate that subset 

o Mozilla Firefox - pioneer 
o Microsoft Edge - fast follow 

• V8 uses TurboFan's advanced type analysis to recover the same information 

o Within ~X% of custom solution on most benchmarks 
o No inter-procedural optimizations 
o Crossover with optimizing normal JavaScript 

• V8 can validate asm.js subset and internally translate to WebAssembly 
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What is WebAssembly? 

• A compilation target for native 

o C/C++, other languages -> WASM 

• A new capability for the web 

o More than just compressed asm.js 
o float32, int64, threads*, SIMD* 

• A complement to JavaScript 

o interface to/from JS code 
o integrate with WebAPIs 

• Performance guarantee (ish) 

o Fast calling conventions 
o no boxing, no GC 
o AOT 
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What is WebAssembly not ? 

• A value judgment about languages 

o JavaScript vs C++ vs Java vs Dart 

• The backend of some C compiler 

o LLVM bitcode, gcc GIMPLE, sea of nodes 

• A programming language 

o generated and manipulated by tools 

• A separate VM within Chrome 

o instead: built on TurboFan and V8 


V8 Pipeline Design (asm.js) 



JavaScript 

source 




optimized 

code 
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V8 Pipeline Design + WASM 



JavaScript 

source 




optimized 

code 
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wasm binary 



V8 Pipeline Design + asm.js + WASM 



JavaScript 


source 

Google 





optimized 

code 


wasm binary 



WebAssembly in a nutshell 


• Data Types 

o void i32 i64 f32 f64 

• Functions 

o Flat, single global table 
o Static binding 
o Indirect calls through table 

• State: linear memory 

o large, bounds-checked array 

• Trusted execution stack 


Google 


Data Operations 


o 

i32 : 

+ - * 
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% « 

>> >>> etc 

o 

i64: 

+ - * 
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% << 

>> >>> etc 

o 

f 32 : 

+ - * 

/ 

sqrt 

ceil floor 

o 

f64: 

+ - * 

/ 

sqrt 

ceil floor 

o 

conversions 
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load 

store 
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call 

direct 

call 
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Structured Control Flow 

o if loop block br switch 


WebAssembly trusted and untrusted state 
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Compiling C/C++ to WebAssembly 


linear memory 
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void* (i32) 


addressable 

stack 


mem size 


virtual machine 


• C compiler translates pointers to i32 indices 

• C compiler places addressable stack in memory 

• asm.js bounds checks (~5% overhead) 


I execution 
stack 
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WebAssembly binary code 


• Goals: 


o 

o 

o 

o 


compact 
easy to verify 
easy to compile 
extensible 


=> smaller than minified JS 
=> one linear pass 

=> one linear pass to construct IR or baseline JIT 
=> anticipate new bytecodes and types 


• Design: 

o AST-based post-order encoding of function bodies 
o All AST nodes are expressions 
o Optional application-specified opcode table 
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Module structure 



Memory declaration 
Function signatures 
Functions 

Indirect Function Table 
Initialized data 


Google 



Module structure 



Memory declaration 
Function signatures 
Functions 

Indirect Function Table 
Initialized data 
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min_size = 16 mb 
max_size = lgb 
exported_to_js = false 




Module structure 



Memory declaration 
Function signatures 
Functions 

Indirect Function Table 
Initialized data 
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(i32, i32) -> i32 
(i64j i32) -> i32 
(f 32) -> i32 




Module structure 



Memory declaration 
Function signatures 
Functions 

Indirect Function Table 
Initialized data 
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myf unc : 
<sig> 
<flags> 
<code> 




Module structure 



Memory declaration 
Function signatures 
Functions 

Indirect Function Table 
Initialized data 


Google 


0: myfuncl 
1: myfunc2 
2: myfunc2 




Module structure 



Memory declaration 
Function signatures 
Functions 

Indirect Function Table 
Initialized data 
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0x01099de8: <data> 
0x0f0a9cl2: <data> 
0x00034a00: <data> 




Bytecode => TurboFan 

• One Linear pass to construct sea of nodes 

o SSA environment tracks control and effect dependencies 
o Stack of if, blocks, and loops 
o Conservative phi insertion at loop headers 
o Reduction steps generate nodes in the IR graph 

• Machine-level graph 

o Immediately suitable for code generation 

o Correct sea-of-nodes can go through scheduling 

o Can apply machine-level and machine-independent optimizations 

• Fast calling convention 

o No boxing of double arguments 
o All arguments in registers 
o No extra JSFunction / context arguments 

Google 


Pre-order encoding of an AST 


if (a) return 0; else return 2; 
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Decoding preorder to IR 


if (a) return 0; else return 2; 
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Decoding preorder to IR 


if (a) return 0; else return 2; 
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Decoding preorder to IR 


if (a) return 0; else return 2; 
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Decoding preorder to IR 


if (a) return 0; else return 2; 
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Decoding preorder to IR 


if (a) return 0; else return 2; 
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Decoding preorder to IR 


if (a) return 0; else return 2; 
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Decoding preorder to IR 


if (a) return 0; else return 2; 
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Decoding preorder to IR 


if (a) return 0; else return 2; 
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Decoding preorder to IR 


if (a) return 0; else return 2; 
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Decoding preorder to IR 


if (a) return 0; else return 2; 
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Decoding preorder to IR 


if (a) return 0; else return 2; 
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unfinished 
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Decoding preorder to IR 


if (a) return 0; else return 2; 
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Decoding preorder to IR 


if (a) return 0; else return 2; 
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Decoding preorder to IR 


if (a) return 0; else return 2; 
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Decoding preorder to IR 


if (a) return 0; else return 2; 
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Decoding preorder to IR 


if (a) return 0; else return 2; 
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Decoding preorder to IR 


if (a) return 0; else return 2; 



Google 


unfinished 


finished 



Production stack 











Decoding preorder to IR 


if (a) return 0; else return 2; 
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Decoding preorder to IR 


if (a) return 0; else return 2; 
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Decoding preorder to IR 


if (a) return 0; else return 2; 
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Decoding preorder to IR 


if (a) return 0; else return 2; 
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Decoding preorder to IR 


if (a) return 0; else return 2; 
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Decoding preorder to IR 


if (a) return 0; else return 2; 
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Decoding preorder to IR 


if (a) return 0; else return 2; 
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Decoding preorder to IR 


if (a) return 0; else return 2; 
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Bytecode => TurboFan 

• One Linear pass to construct sea of nodes 

o SSA environment tracks control and effect dependencies 
o Stack of if, blocks, and loops 
o Conservative phi insertion at loop headers 
o Reduction steps generate nodes in the IR graph 

• Machine-level graph 

o Immediately suitable for code generation 

o Correct sea-of-nodes can go through scheduling 

o Can apply machine-level and machine-independent optimizations 


Google 


TurboFan graph example 


► control edge 

► value edge 


function (x) { 
return x ? 1 : 2; 

} 


y| Start 
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Branch 



IfFalse 



Merge - 
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i 

End 


x 



effect edge 
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TurboFan SSA Environment 
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Using the SSA environment 


bytecode: local[0] = local[0] + local[l] 
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Minimal SSA Renaming in one pass 


if (a) return 0; else return 2; 
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Minimal SSA Renaming in one pass 


if (a) return 0; else return 2; 
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Minimal SSA Renaming in one pass 


if (a) return 0; else return 2; 
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Stack of SSA environments 


Virtual Decoder Path 
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Actual Decoder Path 



The same great AST: now in postorder! 


Function Bodies 
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Post-order encoding of an AST 


return 3 + x * 4 
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Decoding post-order to an AST 
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Decoding post-order to an AST 
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Decoding post-order to an AST 
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Decoding post-order to an AST 


return 3 + x * 4 
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Decoding post-order to an AST 
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Decoding post-order to an AST 


return 3 + x * 4 


finished 






const#3 


const#4 


local 


push 


Google 









Decoding post-order to an AST 
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Decoding post-order to an AST 


return 3 + x * 4 
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Decoding post-order to an AST 


return 3 + x * 4 
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Decoding post-order to an AST 
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Decoding post-order to an AST 


return 3 + x * 4 
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Decoding post-order to an AST 


return 3 + x * 4 
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Decoding post-order to an AST 
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Decoding post-order to an AST 
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Decoding post-order to an AST 
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Decoding post-order to an AST 
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Decode+Verify performance 

return 3 + x * 4 
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Decode+Verify performance 

select (2 , 3 , x) 



preorder 


£ 


Preorder vs Postorder (select) 
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Decode+Verify performance 
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Preorder and Postorder (blocks) 
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Postorder encodings of control 
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Preorder vs. Postorder block 


(block x, y, z) 
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Preorder vs. Postorder block verification 


(block x, br $0, z) 
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Preorder vs. Postorder if /else 

(if else x, y, z) 
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Preorder vs. Postorder if /else 


(if else x, y, z) 
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Preorder vs. Postorder if /else 
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single-pass verification 





Preorder vs. Postorder tableswitch 


(tableswitch x, y, z, w) 
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Preorder vs. Postorder tableswitch 


(tableswitch x, y, z, w) 



tableswitch 


w 



Google 



preorder 



✓ 


in-order 


single-pass verificat 


, 0 . 





WebAssembly binary code 


• Goals: 


o compact 
o easy to verify 
o easy to compile 
o extensible 

• Did we deliver? 


=> smaller than minified JS 
=> one linear pass 

=> one linear pass to construct IR or baseline JIT 
=> anticipate new bytecodes and types 


o Fast single-pass decode+verify (> 1 0OMB/s) 
o Single-pass to compiler IR demonstrated (V8/TurboFan) 
o Fast optimizing compiler (1 .8MB/s single thread, 7MB/s with 8 threads) 
o Within 20% of native code execution speed (geomean; vs 80% for asm.js) 
o Single-pass compiler in development (Mozilla) 


Google 


Compiling WASM vs. Compiling asm.js 

• JavaScript is not statically typed 

o Values have types, not variables 
o 8 is a number, “foo” is a string 

o All basic operators (+ -/*%<< >>) are overloaded or have implicit conversions 

• All arithmetic is done in 64-bit floating point 

o Empirically most programs use small integers (<= 31 bits) 
o Overflow to double causes bailout to slow path, allocation, etc 
o Troublesome cases {-0.0 NaN Infinity -Infinity} 

• Type "annotations” in asm.js 

o a + b | 0 is integer arithmetic 

o +(a + b) is double arithmetic 

o (a >>> 0) < (b >>> 0) is an unsigned comparison 


Google 


Type and Range Analysis (asm.js) 
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Typed lowering as Reduction (asm.js) 
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WebAssembly Status 

• LLVM backend upstream 

• Lots of tools 

• Reference implementation (spec) in Standard ML 

• 3 Browser engines have native support in various stages 

o Google Chrome Beta: fully spec compliant on all architectures, behind a flag 
o Mozilla Firefox: optimized for ia32 and x64, behind a flag 
o Microsoft Edge: support in an experimental build 

• MVP (Version 1 .0) expected to be shipped this summer 

• Standardization expected by the end of the year 


Google 


https : //github. com/WebAssembly/ 


Questions? 
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